<template>
<!-- 最佳歌手 -->
  <div class="best">
    <div class="best-box" v-for="(b,index) in best" :key="index">
      <div class="best-img">
        <img @click="showimg" v-if="b&&b.img1v1Url" :src="b.img1v1Url" alt="歌手图片" />
      </div>
      <div class="singer">
          <div>歌手:</div>
          <span>{{b.name}}</span>
      </div>
    </div>
    <transition 
    enter-active-class="animate__animated animate__slideInUp" 
    leave-active-class="animate__animated animate__slideOutDown">
    <div v-if="SingerSong" class="SingerSong">
      <singer-song
      @songs="SingerSong=$event"
      :best="best"
      :keyword="keyword"
      :songlist="songlist"
      ></singer-song>
    </div>
    </transition>
  </div>
</template>

<script>
import SingerSong from '@/components/SingerSong.vue'
export default {
  props:{
      best:Array,
      songlist:[Array,]
  },
  data(){
    return{
      SingerSong:false
    }
  },
  methods:{
    showimg(){
      this.SingerSong = true
    }
  },
  components:{SingerSong},
};
</script>

<style lang="less" scoped>
.best {
  width: 100%;
  height: 70x;
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 15px;
  .SingerSong{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: white;
    z-index: 11;
  }
  .best-box {
    width: 100%;
    height: 60px;
    display: flex;
    .best-img{
        width: 60px;
        height: 60px;
        margin-left: 15px;
        &>img{
            width: 100%;
            height: 100%;
        }
    }
    .singer{
        flex: 1;
        height: 60px;
        display: flex;
        align-items: center;
        margin-left: 20px;
        &>div{
            font-size: 14px;
            color: #666;
        }
        &>span{
            font-size: 14px;
            font-family: 宋体;
            color: black;
            padding-left: 10px;
        }
    }
  }
}
</style>